<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24" class="form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="区域">
                <el-select v-model="formInline.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker
                  v-model="formInline.date"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="formInline.title" placeholder="名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitTitle" icon="el-icon-search">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-card>
      </el-col>
          <el-col :span="24" class="content">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item,index) in tableData.slice((pages.pageNum-1)*pages.pageSize,pages.pageNum*pages.pageSize)" :key="index">
                <el-card shadow="hover" :body-style="{padding:'0',height:'330px'}">
                  <div :style="`width: 100%;height: 100%;background: linear-gradient(50deg, ${randomRgbColor()},  ${randomRgbColor()});`">
                    <div class="vab-magnifier"></div>
                    <div class="card-title" :style="`color: ${randomRgbColor()};`">{{item.title}}</div>
                    <div class="card-description" :style="`color: ${randomRgbColor()};`">{{item.name}}</div>
                    <div class="card-datetime" :style="`color: ${randomRgbColor()};`">{{item.date}}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <Pagination :total="total" :pageNum.sync="pages.pageNum"
                        :limit.sync="pages.pageSize"
                        :pageSizes="pageSizes"
            ></Pagination>
          </el-col>

    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { randomRgbColor } from '@/utils/randomRgbColor'
import Pagination from '@/components/Pagination/Pagination'
export default {
  name: 'card',
  components:{Pagination},
  data() {
    return {
      total: 0,
      randomRgbColor:randomRgbColor,
      formInline: {
        title: '',
        region: '',
        date:''
      },
      pages: {
        pageNum: 1,
        pageSize: 9
      },
      pageSizes: [9,18,36,54,72,81],
      tableData: [],
      dataList: []
    }
  },
  methods: {
    onSubmitTitle() {
      let list = []
      this.tableData = this.dataList
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].title.indexOf(this.formInline.title) >= 0) {
          list.push(this.tableData[i])
        }
      }
      this.tableData = list
      this.total = this.tableData.length
    },
    fetchData() {
      this.loading = true
      axios.get('http://route.showapi.com/80-27').then(res => {
        this.tableData = res.data._data.data.rows
        this.dataList = res.data._data.data.rows
        this.total = res.data._data.data.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 70px;
  .form {
    ::v-deep.el-input {
      width: 200px;
    }
    ::v-deep.el-form-item__label {
      font-weight: 400;
    }
  }
  .content{
    margin-top: 20px;
    .el-col{
      margin-bottom: 20px;
      .el-card{

      }
      .vab-magnifier{
        width: 100%;
        height: 228px;
      }
      .card-title{
        margin: 20px 20px 10px 20px;
        font-size: 16px;
        font-weight: 700;
      }
      .card-description{
        font-size: 14px;
        margin: 0 20px 10px 20px;
      }
      .card-datetime{
        font-size: 14px;
        margin: 0 20px 10px 20px;
      }
    }
  }
}
</style>
